<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS 字符串</title>
    <script>

        // 计算字符串的长度 
        function testStringLength(){
            var text = "Hello World";
            document.write(text.length)
        }
        
        // 这么一算感觉 后面很多的语言借鉴了 Js 的写法 
        // 为字符串添加样式
        function addStyle(){
            var txt="Hello World!"

            document.write("<p>Big: " + txt.big() + "</p>")
            document.write("<p>Small: " + txt.small() + "</p>")

            document.write("<p>Bold: " + txt.bold() + "</p>")
            document.write("<p>Italic: " + txt.italics() + "</p>")

            document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
            document.write("<p>Fixed: " + txt.fixed() + "</p>")
            document.write("<p>Strike: " + txt.strike() + "</p>")

            document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
            document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")

            document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
            document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")

            document.write("<p>Subscript: " + txt.sub() + "</p>")
            document.write("<p>Superscript: " + txt.sup() + "</p>")

            document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
        }
        
        // 测试 index of 方法
        function testIndexOf(){
            // index of 是区分大小写的 也是从 index 0 开始 
            var str="Hello world!"·
            document.write(str.indexOf("Hello") + "<br />")
            document.write(str.indexOf("World") + "<br />")
            document.write(str.indexOf("world"))
        }

        // 测试match 方法
        function testMatch(){
            var str="Hello world!"
            document.write(str.match("world") + "<br />")
            document.write(str.match("World") + "<br />")
            document.write(str.match("worlld") + "<br />")
            document.write(str.match("world!"))
        }

        // 测试替换字符串中的字符
        function testReplace(){
            var str="Visit Microsoft!"
            document.write(str.replace(/Microsoft/,"W3School"))  // 后面的这个 替换了出现的 Microsoft 
        }
        
        // 笔者自己加了一些测试的方法
        // 测试一些自己加的方法 
        function testSomeStringMethod(){
            var str = "Hello happy world!"
            var txt1 = str.slice(6);  // happy world 开始截取
            var txt2 = str.slice(6,11)  // 6 到 11 的所有字符
            console.log("txt1 is:" + txt1 + "txt2 is:" + txt2)

            // test contact 应该和 Java 中的差不多

            // split() 把字符串分割成 字符串数组 

        }
        


    </script>
</head>
<body>
    <button onclick="testStringLength()">测试字符串长度</button>
    <button onclick="addStyle()">字符串添加样式</button>
    <button onclick="testIndexOf()">测试index OF </button>
    <button onclick="testMatch()">测试匹配 </button>
    <button onclick="testReplace()">测试替换 </button>
    <button onclick="testSomeStringMethod()">添加一些自定义的测试方法</button>
</body>
</html>